<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8" />
<title>国风汉服商城</title>
<!--导入核心文件-->
<script src="../bootstrap3/js/holder.js"></script>
<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet"
	type="text/css">
<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
<script src="../bootstrap3/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/orderConfirm.css" />

<link href="../css/aaa.css" rel="Stylesheet" />
<script src="../js/aaa.js"></script>

<!-- 字体图标 -->
<link rel="stylesheet"
	href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="../css/layout.css" />
<link rel="stylesheet" type="text/css" href="../css/orderConfirm.css" />
<link rel="stylesheet" type="text/css" href="../css/cart.css" />
</head>

<body>
	<!--头部-->
	<div class="s_nav">
		<div class="s_nav_box">
			<a class="s_logo photo" href="../index.html"></a>
			<nav class="s_nav_menu">
				<a class="default active" href="../index.html">首页</a> <a
					class="album" href="album.html">摄影</a> <a class="video"
					href="/video">视频</a> <a class="topic" href="/topic">问答</a> <a
					class="word" href="/word">文章</a> <a class="activity" href="/game">活动</a>

			</nav>
			<div class="def_search  header_user">

				<div class="user">
					<img class="head"
						src="https://pic.hanfugou.com/web/2018/11/20/11/2e3e6efa17ba4116941bd3d176ddc8df.jpeg_50x50.jpg">
					<nav class="dropdown_menu">
						<a class="item letter" href="password.html" target="im"> <i
							class="icon"></i>修改密码
						</a> <a class="item auth" href="userdata.html"> <i class="icon"></i>个人资料
						</a> <a href="upload.html" id="aUMain" class="item usermain"> <i
							class="icon"></i>上传头像
						</a> <a class="item tools" href="address.html"> <i class="icon"></i>收货管理
						</a> <a class="item exit" href="login.html"><i class="icon"></i>退出
						</a>
					</nav>
				</div>
				</a>

				<div class="appdown">
					APP下载
					<div class="appdownload">
						<div class="appdownload_btn">
							<a class="ios"
								href="https://itunes.apple.com/cn/app/id1065807878"
								target="_blank">iPhone下载</a> <a class="android"
								href="https://www.hanfuhui.cn/download" target="_blank">Android下载</a>
						</div>
						<img
							src="../image/2e3e6efa17ba4116941bd3d176ddc8df.jpeg_100x100.jpg"
							alt="">
					</div>
				</div>
				<a class="search_btn" onclick="location.href='/search'"></a>
			</div>
		</div>
	</div>
	<!--头部结束-->
	<!--导航 -->
	<!--分割导航和顶部-->
	<div class="clearfix"></div>
	<div class="container">
	<div class="col-md-12 top-nav">
		<div class="col-md-6">
			<ul class="nav nav-pills">
				<li><a href="#"></a></li>
				<li class="active"><a href="../index.html"><span
						class="fa fa-home"></span></a></li>
				<li><a class="gou" href="han_shopmall.html">商城</a></li>
				<li><a href="cart.html">购物车</a></li>
				<li><a href="news.html">资讯</a></li>
				<li><a href="culture.html">文化</a></li>
			</ul>

		</div>
		<div class="col-md-6">

			<form action="search.html" class="form-inline" role="form"
				style="float: right;">
				<div class="form-group">
					<input type="text" class="form-control" id="search" name="search"
						placeholder="请输入商品名称进行搜索">
				</div>

				<button type="submit" class="btn btn-default btn-sm">
					<span class="fa fa-search"></span>
				</button>
			</form>

		</div>
	</div>
	<!--导航结束-->
	<div id="container">
		<div class="col-md-offset-1 col-md-10">

			<div class="col-md-4">
				<div class="col-md-12 order-bar-active">
					1.确认订单信息 <span class="pull-right"><span
						class="fa fa-chevron-right"></span></span>
				</div>

			</div>
			<div class="col-md-4">
				<div class="col-md-12 order-bar-undo">
					2.在线支付 <span class="pull-right"><span
						class="fa fa-chevron-right"></span></span>
				</div>
			</div>
			<div class="col-md-4">
				<div class="col-md-12 order-bar-undo">3.付款成功</div>
			</div>

			<div class="col-md-12">
				<form id="form-create-order" role="form">
					<div class="form-group">
						<label for="name">
							<h4>选择收货地址：</h4>
						</label> <select name="address" id="address-list" class="form-control">
							<option>八戒&nbsp;&nbsp;&nbsp;家&nbsp;&nbsp;&nbsp;北京市房山区高老庄3排6号&nbsp;&nbsp;&nbsp;1380***1234</option>
							<option>八戒&nbsp;&nbsp;&nbsp;公司&nbsp;&nbsp;&nbsp;北京市海淀区中关村中路1号1001室&nbsp;&nbsp;&nbsp;1380***1234</option>
							<option>八戒&nbsp;&nbsp;&nbsp;宿舍&nbsp;&nbsp;&nbsp;北京市海淀区永丰镇30号&nbsp;&nbsp;&nbsp;1380***1234</option>
						</select>

					</div>
					<div class="panel panel-primary">
						<div class="panel-heading">
							<h3 class="panel-title">订单商品信息：</h3>
						</div>
						<div class="panel-body">
							<table class="cart-table" width="100%">
								<thead>
									<tr>

										<th width="110"></th>
										<th width="39%">商品</th>
										<th width="21%">单价</th>
										<th width="25%">数量</th>
										<th width="21%">金额</th>

									</tr>
								</thead>
								<tbody id="cart-list" class="cart-body">
									<tr>
										<td><img
											src="../images/portal/12DELLXPS13-silvery/collect.png"
											width="110" /></td>
										<td>联想(Lenovo)小新Air13 Pro 13.3英寸14.8mm超轻薄笔记本电脑</td>
										<td>¥<span>5298</span></td>
										<td>1</td>
										<td><span>5298</span></td>
									</tr>
								</tbody>
							</table>
							<div class="total-bar">
								&nbsp; <span class="pull-right">已选商品 <span
									id="selectCount">1</span>件 总价¥ <span id="selectTotal">5298</span>元

								</span>

							</div>
						</div>
					</div>
					<div class="pay-bar">
						<a href="cart.html">返回购物车</a> <span class="pull-right"><input
							id="btn-submit" type="button" value="在线支付"
							class="btn btn-primary btn-lg link-pay" /></span>
					</div>

				</form>

			</div>
		</div>
	</div>
	</div>
	<!--页脚开始-->
	<footer style="text-align: center;">
		<p>
			<a href="/" target="_blank">关于我们</a><i>|</i><a href="/"
				target="_blank">商家入驻</a><i>|</i><a href="/" target="_blank">入驻协议</a><i>|</i><a
				href="#" target="_blank">新手指南</a><i>|</i><a
				href="/copyright/?action=cooperation" target="_blank">商务合作</a><i>|</i><a
				href="" target="_blank">汉服荟</a>
		</p>
		<p class="copyright">
			<a href="/" class="ebs" target="_blank"></a>CopyRight ©2018
			珠海市达内汉服网络科技有限公司 版权所有 <a href="" target="_blank">粤ICP备14084884号-1</a>
			电话：0888-8888888
		</p>
	</footer>
	<!--页脚结束-->

	<script type="text/javascript">
		$(document).ready(function() {
			// 1. 加载收货地址列表
			showAddressList();
			// 2. 加载购物数据列表
			showCartList();
			// 3. 为按钮绑定提交事件
			$("#btn-submit").click(function() {
				createOrder();
			});
		});

		// 加载购物数据列表
		function showCartList() {
			var url = "../cart/get_by_ids";
			var data = location.search.substring(1);
			$
					.ajax({
						"url" : url,
						"data" : data,
						"type" : "GET",
						"dataType" : "json",
						"success" : function(json) {
							$("#cart-list").empty();

							var list = json.data;
							var selectCount = 0;
							var selectTotal = 0;
							for (var i = 0; i < list.length; i++) {
								selectCount += list[i].count;
								selectTotal += list[i].newPrice * list[i].count;

								var html = '<tr>'
										+ '<td><input type="hidden" name="cart_id" value="#{id}" /><img src="..#{image}" width="110" /></td>'
										+ '<td>#{title}</td>'
										+ '<td>¥<span>#{price}</span></td>'
										+ '<td>#{count}</td>'
										+ '<td><span>#{totalPrice}</span></td>'
										+ '</tr>';

								html = html.replace(/#{id}/g, list[i].id);
								html = html.replace(/#{image}/g, list[i].image);
								html = html.replace(/#{title}/g, list[i].title);
								html = html.replace(/#{price}/g,
										list[i].newPrice);
								html = html.replace(/#{count}/g, list[i].count);
								html = html.replace(/#{totalPrice}/g,
										list[i].newPrice * list[i].count);

								$("#cart-list").append(html);
							}

							$("#selectCount").html(selectCount);
							$("#selectTotal").html(selectTotal);
						}
					});
		}

		// 加载收货地址列表
		function showAddressList() {
			var url = "../address/list";
			$.ajax({
				"url" : url,
				"type" : "GET",
				"dataType" : "json",
				"success" : function(json) {
					$("#address-list").empty();

					var list = json.data;
					for (var i = 0; i < list.length; i++) {
						var op = '<option value="' + list[i].id + '">'
								+ list[i].name + ' / ' + list[i].tag + ' / '
								+ list[i].phone + ' / ' + list[i].district
								+ ', ' + list[i].address + '</option>';
						$("#address-list").append(op);
					}
				}
			});
		}

		function createOrder() {
			var url = "../order/create";
			var data = $("#form-create-order").serialize();
			console.log(data.id);

			$.ajax({
				"url" : url,
				"data" : data,
				"type" : "POST",
				"dataType" : "json",
				"success" : function(json) {
					if (json.state == 200) {
					    var id=json.data.id;
						window.location.href="payment.html?id="+id;
					} else {
						alert(json.message);
					}
				},
				"error" : function() {
					alert("您的登录信息已经过期！请重新登录！");
					location.href = "login.html";
				}
			});
		}
	</script>
</body>

</html>








